<template>
    <div id="player-modal" class="modal color-0" tabindex="-1" role="dialog"><!--fade-->
        <div class="modal-dialog color-0" role="document">
            <div class="modal-content color-0">
                <div class="modal-padding-0 big-150 color-0">
                    <div class="right-0">
                        <button v-on:click="shutdown()" id="but-remove" class="btn btn-grey btn-lg">
                            <i class="ace-icon glyphicon glyphicon-remove"></i>
                        </button>
                    </div>
                    <div v-bind:id="playerId">
<!--                        <div  class="prism-player" id="J_prismPlayer"></div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "authPlayer",
        props: {
            playerId: {
                default: "authPlayer-div"
            },
            authDiv: {
                default: "authJ_prismPlayer"
            },
            url: {
                default: ""
            },
        },
        data: function () {
            return {
                aliAuthPlayer: {},
            }
        },
        methods: {
            authPlay: function (videoId, authCode) {
                let _this = this;
                //如果已经存在播放器，就将它删除。
                _this.aliAuthPlayer = null;
                $("#" + _this.authDiv).remove();

                //在id="playerId"的div中追加一个播放器。
                $("#" + _this.playerId).append("<div  class=\"prism-player\" id=\"" + _this.authDiv + '"></div>');
                //创建播放器执行代码
                _this.aliAuthPlayer = authPlayer.newAliplayer(_this.aliAuthPlayer, _this.authDiv, videoId, authCode);
                //防止错误点击视频界面以外的位置而导致的视频关闭
                $("#player-modal").modal({backdrop: 'static'});
                //显示模态框
                $("#player-modal").modal("show");
            },

            clickAuthPlay: function (section) {
                let _this = this;
                let formData = new window.FormData();
                formData.append('videoId', section.vod);
                let authUrl = process.env.VUE_APP_SERVER + '/file/' + _this.url + '/admin/get-auth';
                Loading.show();
                _this.$ajax.post(authUrl, formData).then((response) => {
                    Loading.hide();
                    let resp = response.data;
                    let authCode = resp.content;
                    if (resp.success) {
                        console.log("authCode = " + authCode);
                        _this.authPlay(section.vod, authCode);
                    } else {
                        Toast.warning('播放错误。')
                    }
                });
            },

            shutdown:function () {
                let _this = this;
                //其实可以不使用.pause()方法，直接将aliAuthPlayer设置为null销毁播放器实现关闭视频的。
                //但这里示范一下.pause()方法使用时的坑
                _this.aliAuthPlayer.pause();//这个方法是暂停视频
                //必须等到.pause()方法执行完毕之后才能将aliAuthPlayer设置为null，否则会报空指针异常。
                setTimeout(function () {
                    //延迟1秒后再执行，1秒的时间足以让.pause()方法执行完毕了。
                    _this.aliAuthPlayer = null;
                },1000);
                $("#" + _this.authDiv).remove();
                $("#player-modal").modal("hide");
            },
        },
    }

</script>

<style scoped>
    .right-0{
        float: right;
        position: relative;
        top: -45px;
    }
    .big-150{
        width: 110%;
        left: -2.5%;
        top: 30%;
    }
    .modal-padding-0{
        position: relative;
        padding: 0px;
    }
    .color-0{
        background-color: rgba(0,0,0,0);
    }
</style>
